<template>
  <el-form :inline="true">
    <el-row >
      <el-col :span="4">
        <el-form-item>
          <el-select v-model="worktype" placeholder="作品分类"  @change="changeWorkType" clearable="true">
            <el-option label="文字作品" value="文字作品" />
            <el-option label="摄影作品" value="摄影作品" />
            <el-option label="美术作品" value="美术作品" />
            <el-option label="音乐作品" value="音乐作品" />
            <el-option label="影视作品" value="影视作品" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4" >
        <el-form-item>
          <el-select v-model="sorttype" placeholder="排序方式" @change="changeSortType" clearable="true">
            <el-option label="升序" value="升序" />
            <el-option label="降序" value="降序" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5" :offset="8" >
        <el-form-item>
          <el-input v-model="workname" placeholder="搜索作品名称" clearable="true" @clear="getdata" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item>
          <el-button
              @click="search"
              color="#626aef"
              :dark="isDark"
              plain>搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>


  <el-table  :data="TableData" style="width: 1190px"
             :header-cell-style="{background:'#703CF6',color:'#fdfdfd',textAlign: 'center'}"
             :cell-style="{ textAlign: 'center' }" >

    <el-table-column prop="goodsName" label="商品名称" width="120" />
    <el-table-column prop="goodsType" label="作品类别"  width="140">
      <template  v-slot="scope">
        <el-tag  type="primary" v-if="scope.row.goodsType=='文字作品'">{{scope.row.goodsType}}</el-tag>
        <el-tag  type="success" v-if="scope.row.goodsType=='美术作品'">{{scope.row.goodsType}}</el-tag>
        <el-tag  type="warning" v-if="scope.row.goodsType=='摄影作品'">{{scope.row.goodsType}}</el-tag>
        <el-tag  type="danger" v-if="scope.row.goodsType=='音乐作品'">{{scope.row.goodsType}}</el-tag>
        <el-tag  type="info" v-if="scope.row.goodsType=='影视作品'">{{scope.row.goodsType}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="tradeTime" label="交易时间" width="250" />
    <el-table-column prop="tradeType" label="交易类别" width="140">
      <template  v-slot="scope">
        <el-tag  type="primary" v-if="scope.row.tradeType=='使用权'">{{scope.row.tradeType}}</el-tag>
        <el-tag  type="success" v-if="scope.row.tradeType=='所有权'">{{scope.row.tradeType}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="sellName" label="出售方" width="160"/>
    <el-table-column prop="buyName" label="购买方" width="160"/>
    <el-table-column prop="price" label="价格" width="120"/>
    <el-table-column prop="operation" label="操作" width="100">
      <template  v-slot="scope">
        <el-link  type="primary" @click="showDetail(scope.$index,scope.row.id,scope.row.txHash,scope.row.fileHash)">查看详情</el-link>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="drawer"  :with-header="true" title="交易详情" size="40%">
    <el-tabs class="drawerTab" type="border-card">
      <el-tab-pane label="存证详细信息">
        <el-descriptions
            direction="vertical"
            :column="1"
            :size="size"
            border
        >
          <el-descriptions-item label="文件哈希">{{ this.fileHash }}</el-descriptions-item>
          <el-descriptions-item label="交易哈希">{{ this.detail }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="存证证明文件">
        <el-button
            color="#626aef"
            :dark="isDark"
            plain
            @click="downloadCer"
        >
          <el-icon size="large"><Download /></el-icon>
          下载文件</el-button>
        <el-alert
            title="存证证明文件预览"
            type="info"
            description="此文件为在本平台交易的认证，请下载并保存在本地"
            show-icon
            :closable="false"
            style="margin-top: 10px"
        />
        <VuePdfEmbed class="CerPdf" :source="this.CerUrl"/>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";
import conflux from "@/conflux/conflux";
import VuePdfEmbed from "vue-pdf-embed";
import {Download} from "@element-plus/icons-vue";

export default {
  name: "trade-form",
  components: {VuePdfEmbed,Download},
  computed:{
      userId(){
        return JSON.parse(sessionStorage.getItem('userObj')).id;
    }
  },
  created(){
    console.log('成功加载数据')
    this.getdata()
  },
  data(){
    return {
      TableData:[],
      worktype:'',
      sorttype:'',
      workname:'',

      drawer:false,
      detail:'',
      fileHash:'',
      //存证文件url
      CerUrl:''
    }
  },
  methods: {


    downloadCer(){
      window.location.href=this.CerUrl
    },

    async showDetail(index,tradeId,txHash,fileHash){
      this.detail=txHash
      this.fileHash=fileHash
      this.drawer = true
      this.CerUrl=this.TableData[index].tradeCertification
      console.log(tradeId);
      if (this.TableData[index].tradeCertification){
        return;
      }
      let timestamp;
      let blkHeight;
      try {
        const result = await conflux.getTransactionByHash(txHash);
        const blk = await conflux.getBlockByHash(result.blockHash);
        timestamp = this.timestampToTime(blk.timestamp);
        blkHeight=result.epochHeight[0];
        }catch (e){
          console.log(e);
          ElMessage({
            message: '区块哈希获取失败',
            type: 'warning'
          })
        }
        axios.get('http://120.48.51.66:8081/trade/viewDetails',{
          params:{
            tradeId:tradeId,
            chainTime:timestamp,
            blockHeight:blkHeight
          }
        }).then(async (response) => {
          if (response.data.code == 200){
            ElMessage({
              message: '生成成功',
              type: 'success'
            })
          }
        })
    },

    timestampToTime(cjsj) {
      const date = new Date(cjsj * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() + ' '
      const h = date.getHours() + ':'
      const m = date.getMinutes() + ':'
      const s = date.getSeconds()
      return Y + M + D + h + m + s;
    },

    //选择作品类型
    changeWorkType(){
      console.log(this.worktype)
      this.getdata()
    },
    // 选择排序类型
    changeSortType(){
      console.log(this.sorttype)
     this.getdata()
    },
    search(){
      console.log(this.workname)
      this.getdata()
    },

    //获取数据
    getdata(){

      axios.get('http://120.48.51.66:8081/trade/searchTradeByWorkName'
          ,{
            params:{
              userId:this.userId,
              stringPara:this.workname,
              classification:this.worktype,
              sort:this.sorttype
            }
          }).then((response)=>{
        if(response.data.code===200){
          console.log('交易数据')
          console.log(response.data)
          this.TableData=response.data.data.tradeRecord

        }else{
          if(response.data.code==11000){
            console.log("错误码 11000")
          }else{
            this.$message({
              message: "获取在售列表失败",
              type: "error"
            });          }
        }
        // eslint-disable-next-line no-unused-vars
      })
    }
  }
}

</script>

<style scoped>
.CerPdf{
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
.drawerTab{
  padding-left: 0px;
  margin-left: 0px;
  height: 100%;
  width: 100%;
}
</style>




